<template>
	<view :style="[style]" class="e-status-bar">
		<slot />
	</view>
</template>
<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	
	/**
	 * StatbusBar 状态栏占位
	 * @description 本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
	 * @tutorial https://uviewui.com/components/statusBar.html
	 * @property {String}			bgColor			背景色 (默认 'transparent' )
	 * @property {String | Object}	customStyle		自定义样式 
	 * @example <e-status-bar></e-status-bar>
	 */
	export default defineComponent({
		name: "e-status-bar",
		mixins: [mpMixin],
	});
</script>
<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from "vue";
	import {
		deepMerge,
		sys
	} from "../../libs/utils";
	import {
		addStyle,
		addUnit
	} from "../../libs/utils/_utils";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import type {
		StyleProperties
	} from "../../libs/tokens";
	import {
		statusBarProps
	} from "./props";
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		statusBar: statusBarDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(statusBarProps)
	const props = useDefaultProps < DefaultProps['statusBar'] > (_props, statusBarDefaultProps);

	const style = computed(() => {
		const style: StyleProperties = {};
		// 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
		style.height = addUnit(sys().statusBarHeight || 0, "px");
		style.backgroundColor = props.value.bgColor;
		return deepMerge(style, addStyle(props.value.customStyle as Record<string,any>) as Record<string,any>);
	});
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/status-bar.scss";
</style>
